<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>账户资金</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/all.css" />
		<link rel="stylesheet" href="css/account-capaital.css" />
	</head>
	<style type="text/css">
		.detail{
			position: absolute;
		    top: 4.6rem;
		    bottom: 0.1rem;
		    width: 100%;
		    background: #fff;
		    overflow-y: scroll;
		}
		   
	</style>
	<body>
		<div>
			<div class="head">
				<span href="javascript:;" onclick="go()"><img src="img/zuo.png" alt="" class="arrows"></span>
				<h1 class="title">账户资金</h1>
				<a href="detail.html"><img class="certain" src="img/shengluehao.png" alt=""></a>
			</div>
			<div class="middle">
				<div class="message">
					<p class="balace">当前余额</p>
					<div>
						<span class="balace-one">5.96</span><span class="balace-two">元</span>
					</div>
					<div>
					<span onclick="location.href='./voucher.html'">
	                    <div class="invest">
	                        <span>充值</span>
						</div>
					</span>
					<a href="deposit.html">		
						<div class="invest">
							<span>提现</span>
						</div>
					</a>
				</div>
			</div>
			<div id="particulars" class="detail">
			
			
				<!--<div class="income">
					<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>
				<div class="income">
					<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>
				<div class="income">
					<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>
				<div class="income">
					<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>
				<div class="income">
					<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>
				<div class="income">-->
					<!--<div class="clearfix">
						<span class="income-one">广告收益</span><span class="income-two">+2.3元</span>
					</div>
					<div class="clearfix">
						<span class="income-three">每日广告收益</span><span class="income-four">2018-10-12 13:46:55</span>
					</div>
				</div>-->
			</div>
		</div>
		</div>
		
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/secondLevel.js"></script>
		<script src="js/all.js"></script>
		<script type="text/javascript">
			(() => {
				//获取钱包
				$.ajax({
					type: "post",
					url: Url + "/wallet/getWallet",
					xhrFields: {
						withCredentials: true
					},
					data: {

					},
					success: ((data) => {
						console.log(data);
						if(data.success) {
							$(".balace-one").text(data.message);
						} else {
							popup(data.message)
						}

					}),
					error: ((err) => {
						console.log(err);
					})
				});




			//上拉加载
			//_loadIndex 为请求的页数    _loadState为请求状态  0 可以请求  1 正在请求  2 请求结束
			var _loadIndex = 1,
				_loadState = 0;

			//上拉加载调用js
			loadmore('.detail', function(data) {
				$.each(data.data.list, function(key, val) {
					$('#wrapper ul').append();
				});
			}, function() {});

			function loadmore(element, successFn) {
				$(element).on("scroll", function() {
					//当前可视容器高度
					var _elementHeight = $(element).outerHeight(),
						//当前滚动区域高度
						_elementChildHeight = $(element).children().outerHeight(),
						//滚动条高度
						_elementScroll = $(element).scrollTop();
					//滚动区域 - 滚动条高度 > 可视高度  就是还可以滚动  表示没有滚动到底部  否则就到了底部
					if(_elementChildHeight - _elementScroll - 10 > _elementHeight) {
						//console.log('没到底')
					} else {
						//console.log('到底了')
						//当状态为0 的时候进行加载，防止重复加载
						if(_loadState == 0) {
							//状态更新为1
							_loadState = 1;
							//增加页数
							_loadIndex += 1;
							//添加正在加载loadding
							$(element).append('<p class="nowLoad">加载中...</p>');
							//请求当前页数ajax
							ajaxLoad(_loadIndex);
						}
					}
				});

			};




	var html = "";
			function ajaxLoad(){
				//获取明细
				$.ajax({
					type: "post",
					url: Url + "/wallet/getBill",
					xhrFields: {
						withCredentials: true
					},
					data: {
						"page": _loadIndex,
						"rows": 9
					},
					success: ((data) => {
						//	transactionType：1 代表支出 2 代表收入 3 代表充值 4 提现
						console.log(data);
						
					_loadState = 0;
					
				 
					 
					 
					  
						for(let i = 0; i < data.message.length; i++) {
							let source;    //每笔钱的来源
							let issubtract;   //支出还是收入
							if(data.message[i].transactionType == 1){
								source = "支出";
								issubtract = "-";
							}else if(data.message[i].transactionType == 2){
								source = "收入";
								issubtract = "";
							}else if(data.message[i].transactionType == 3){
								source = "充值"
								issubtract = "";
							}else if(data.message[i].transactionType == 4){
								source = "提现"
								issubtract = "-";
							}
							 
								var tt = new Date(data.message[i].time).toLocaleString().replace(/\//g, "-");
							
							
							html += `
 								<div class="income">
									<div class="clearfix">
										<span class="income-one">${data.message[i].remarks}</span><span class="income-two">${issubtract}${data.message[i].price}元</span>
									</div>
									<div class="clearfix">
										<span class="income-three">${source}</span><span class="income-four">${tt}</span>
									</div>
								</div>
 							`
						}
						
						$("#particulars").html(html);
						
						if(data.message == ""){
							_loadState = 1;
							html = "";
							$(".nowLoad").text("我也是有底线的。。。");
						}

					}),
					error: ((err) => {
						console.log(err);
					})
				});
 
			}
				 
				 
				 
				 ajaxLoad(_loadIndex);
		})()
		</script>
	</body>

</html>